{% extends 'frame/base.html' %}
{% load staticfiles %}
{% block title_block %}
	用例创建
{% endblock %}
{% block mystyle_css %}
	<style type="text/css">
		#apiparams{
			padding-left: 10px;
			padding-right: 10px;
		}

		.lnr-circle-minus:hover{
			
			cursor:pointer;
			color:  red;
			font-size:20px;
		}

		.lnr-circle-minus{
		
			cursor:pointer; 
			font-size:20px;
		}

		#chevron-down-headers:hover{
			color:  #00AAFF;
			font-size:25px;
		}

		#chevron-down-headers{
			font-size:25px;
		}
		#chevron-down-body:hover{
			color:  #00AAFF;
			font-size:25px;
		}

		#chevron-down-body{
			font-size:25px;
		}
	</style>
{% endblock %}

{% block body_block %}
<div class="main">
	<!-- MAIN CONTENT -->
	<div class="main-content">
		<div class="container-fluid">
			<div class="row">
				<!-- APIparams -->
					<div class="container-fluid" id="apiparamspanel">
						<div class="row">
							<div class="col-md-8">
								<div class="panel">
									<div class="panel-heading" style="padding-bottom: 0;">
										<div class="right">
											<button type="button" class="btn-toggle-collapse"><i class="lnr lnr-chevron-up"></i></button>
											<button type="button" class="" onClick="hideapiparamspanel(this)"><i class="lnr lnr-cross"></i></button>
										</div>
									</div><br>
					
									<div class="panel-body" id="apiparams">
										<div class="input-group">
											<span class="input-group-btn"><button class="btn btn-default" type="button" value="METHOD" id="METHOD">METHOD</button></span>
											<input id="testcase_url" class="form-control" type="text" placeholder="URL（选填）" value=''>
											<span class="input-group-btn"  id="testcasecreateajax"><button class="btn btn-default" type="button">创建</button></span>
										</div>

										<div class="custom-tabs-line tabs-line-bottom left-aligned">
											<ul class="nav" role="tablist">
												<li ><a href="#tab-bottom-left1" role="tab" data-toggle="tab">Headers</a></li>
												<li ><a href="#tab-bottom-left2" role="tab" data-toggle="tab">Body</a></li>
												<li class="active"><a href="#tab-bottom-left3" role="tab" data-toggle="tab">General</a></li>
											</ul>
										</div>
								
										<div class="tab-content">
										<div class="tab-pane fade" id="tab-bottom-left1" style="padding: 0px;">				
											<br>
											<table class="table table-bordered" id="tableshow_headers">
												<thead>
													<tr>
														<th style="padding-left: 8px;">key</th>
														<th>Value</th>
														<th>Description</th>
														<th style="width: 1px; padding-left: 8px; padding-right: 8px;" >Del</th>
													</tr>
												</thead>
												<tbody>																			   						
												</tbody>
											</table>
											<div class="text-center" style="cursor:pointer;" id="chevron-down-headers"><i class="lnr lnr-chevron-down"></i></div>
										</div>
										<div class="tab-pane fade" id="tab-bottom-left2" style="padding: 0px;">
											<br>
											<table class="table table-bordered" id="tableshow_body">
												<thead>
													<tr>
														<th style="padding-left: 8px;">key</th>
														<th>Value</th>
														<th>Description</th>
														<th style="width: 1px; padding-left: 8px; padding-right: 8px;" >Del</th>
													</tr>
												</thead>
												<tbody>												   											
												</tbody>
											</table>
											<div class="text-center" style="cursor:pointer;" id="chevron-down-body"><i class="lnr lnr-chevron-down"></i></div>
											<table id="tablebackup" style="display: none">
												<tbody>
													<tr>
														<td name="key" contentEditable="true" style="padding-left: 8px;"></td>
														<td name="Value" contentEditable="true"></td>
														<td name="Description" contentEditable="true"></td>
														<td name="Delete" style="width: 1px; padding-right: 8px; padding-left: 8px;"><i class="lnr lnr-circle-minus" onClick="deltr(this)"></i></td>
													</tr>
												</tbody>
											</table>
										</div>
										<div class="tab-pane fade in active" id="tab-bottom-left3" style="padding: 0px;"><br>	
											<div class="input-group">
												<span class="input-group-btn" style="width: 20%;" ><input id="testcase_name" class="form-control" type="text" placeholder="测试用例名" value=""></span>
												<input id="testcase_desc" class="form-control" type="text" placeholder="测试用例描述（选填）" value="">
												<span class="input-group-btn"><input id="testcase_expectcode" class="form-control" type="text" placeholder="期望" value="" style="width: 65px;"></span>
											</div><br>	
											<div class="input-group">
												<span class="input-group-btn"><button class="btn btn-default" type="button" value="PROTOCOL" id="PROTOCOL">PROTOCOL</button></span>
												<input id="testcase_host" class="form-control" type="text" placeholder="HOST" value="">
												<span class="input-group-btn"><input id="testcase_port" class="form-control" type="text" placeholder="PORT" value="" style="width: 65px;"></span>
											</div><br>												

	                                   		<div id="testcase_select" name="name"></div><br>
	                                   		
		                                    <select class="form-control" id="testcase_apideveloper" name="testcase_apideveloper" required="true">
	                                        	<option value="" disabled selected>&minus;&minus;&minus;开发人员&minus;&minus;&minus;</option>
	                                        {% for developer in apidevelopers %}                       
	                                            <option value="{{developer.id}}">{{developer.username}}</option>
	                                        {% endfor %} 
	                                   		</select><br>	                   
		                                    <select class="form-control" id="testcase_function" name="testcase_function" required="true">
	                                        	<option value="" disabled selected>&minus;&minus;&minus;参数定制&minus;&minus;&minus;</option>                      
	                                   			
	                                   		</select><br>	                              
										</div>								
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				<!-- APIparams -->
				</div>
			</div>
		</div>
	</div>
</div>
<!-- END MAIN CONTENT -->
</div>
{% endblock %}
{% block script %}
<script>
	$("#PROTOCOL").click(function() {
		var ProtocolValue = $('#PROTOCOL').val();
				
		if (ProtocolValue == 'PROTOCOL') {
			$("#PROTOCOL").text("HTTP");
			$("#PROTOCOL").val("HTTP");
		};

		if (ProtocolValue == 'HTTP') {
			$("#PROTOCOL").text("HTTPS");
			$("#PROTOCOL").val("HTTPS");
		};

		if (ProtocolValue == 'HTTPS') {
			$("#PROTOCOL").text("PROTOCOL");
			$("#PROTOCOL").val("PROTOCOL");
		};

	});    
</script>

<script>
	$("#METHOD").click(function() {
		var MethodValue = $('#METHOD').val();
				
		if (MethodValue == 'METHOD') {
			$("#METHOD").text("GET");
			$("#METHOD").val("GET");
		};

		if (MethodValue == 'GET') {
			$("#METHOD").text("POST");
			$("#METHOD").val("POST");
		};

		if (MethodValue == 'POST') {
			$("#METHOD").text("METHOD");
			$("#METHOD").val("METHOD");
		};

	});    
</script>

<script>
	$(function () {
		$("#chevron-down-headers").click(function () {
			$("#tablebackup tbody tr").clone().appendTo("#tableshow_headers tbody");   
		});

		$("#chevron-down-body").click(function () {
			$("#tablebackup tbody tr").clone().appendTo("#tableshow_body tbody");   
		});
	});


	function deltr(opp) {
		$(opp).parent().parent().remove();
	}
</script>

<script>
	var all_project_testsuites_list = {{ all_project_testsuites_list|safe }};

	$('#testcase_select').selectivity({
	    allowClear: false,
	    // multiple:true,
	    items: all_project_testsuites_list,
	    placeholder: '---所属测试集---',
	});

</script>
{% endblock %}
